$alert-status : (
        primary: var(--bs-primary),
        secondary: var(--bs-secondary),
        success: var(--bs-success),
        warning: var(--bs-warning),
        danger: var(--bs-danger),
        info: var(--bs-info),
        light: var(--bs-light),
        dark: var(--bs-dark),
);

@mixin alert-variant($color) {
    border           : 1.33px solid $g-900;
    background-color : $color;
    @if ($color== var(--bs-info)) {
        color : $white;
    } @else {
        color : $g-900;
    }

    hr {
        border-top-color : $color;
    }
    .alert-link {
        color : $grape;
    }
    .btn-close {
        width     : 0.75em;
        height    : 0.75em;
        font-size : $btn-font-size-sm;
    }
}

@each $state, $value in $alert-status {
    .alert-#{$state} {
        @include alert-variant($value);
    }
}

.alert-dismissible {
    .btn-close {
        padding : 1rem 1rem;
        right   : 0;
        left    : auto;

        &:focus {
            box-shadow : none;
            color      : $black;
            opacity    : 0.75;
        }
    }
}

.alert {
    text-align     : start;
    font-size      : $font-size-sm;
    line-height    : $line-height-20;
    padding-top    : 0.625rem;
    padding-right  : 2rem;
    padding-left   : 1rem;
    padding-bottom : 0.625rem;
    position       : relative;

    & > span[class*="ri-"] {
        font-size : $font-size-base;
    }

    & > .alert-header {
        font-weight : $font-weight-600;
        font-size   : $font-size-lg;
        line-height : $line-height-26;
        color       : inherit;

        & > span[class*="ri-"] {
            font-weight : $font-weight-normal;
        }
    }
}

#notif-container {
    position   : fixed;
    top        : 5%;
    left       : 20%;
    width      : 60%;
    z-index    : 3500;
    min-height : 0;

    & .alert {
        animation : slidefromtop 1s;
    }
}

.no-simple-graph {
    height : 300px;
}

